<template id="">
  <div class="TimeTransform" id="TimeTransform">
    <el-form id="time_form" ref="form" :model="form_input" label-width="80px" @submit.native.prevent >
      <el-input id="time" v-model="form_input.time_intput" @keyup.enter.native="enter_press()"></el-input>
      <el-form-item>
      </el-form-item>
      <el-button type="primary" @click.prevent="currentTime()">当前时间</el-button>
      <el-button type="primary" @click.prevent="ts2timeBtn(1)">毫秒转时间</el-button>
      <el-button type="primary" @click.prevent="ts2timeBtn(1000)">秒转时间</el-button>
      <el-button type="primary" @click.prevent="time2mtsBtn()">时间转毫秒</el-button>
    </el-form>

    <el-form ref="form" :model="form_output" label-width="80px">
      <el-form-item>
      </el-form-item>
      <el-input type='textarea' rows="8" cols="80" v-model="form_output.time_output"></el-input>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'TimeTransform',
    data() {
      return {
        form_input: {
          time_intput: ''
        },
        form_output: {
          time_output: ''
        },
      }
    },
    methods: {
      currentTime(){
        var d = new Date();
        var ts = d.getTime();
        var time = d.format("yyyy-MM-dd hh:mm:ss S");
        this.form_input.time_intput = ts;
        this.form_output.time_output = time;
      },
      ts2timeBtn(data) {
        var ts = this.form_input.time_intput
        var d = new Date(Number(ts) * data)
        var time = d.format("yyyy-MM-dd hh:mm:ss S");
        this.form_output.time_output = time;
      },
      time2mtsBtn() {
        var ts = this.form_input.time_intput
        var tail = ts+'';
        var split;
        var year = tail.substring(0, 4);
        tail = tail.substr(4)
        var split = tail.substr(0, 1)
        var month;
        if (split == "-") {
          month = tail.substr(1, 2)
          tail = tail.substr(3)
        } else {
          month = tail.substr(0, 2)
          tail = tail.substr(2)
        }

        var split = tail.substr(0, 1)
        var split = tail.substr(0, 1)
        var day;
        if (split == "-") {
          day = tail.substr(1, 2)
          tail = tail.substr(3)
        } else {
          day = tail.substr(0, 2)
          tail = tail.substr(2)
        }
        var hour = "00";
        if (tail.length >= 2) {
          var split = tail.substr(0, 1)
          if (split == " " && tail.length > 2) {
            hour = tail.substr(1, 2)
            tail = tail.substr(3)
          } else {
            hour = tail.substr(0, 2)
            tail = tail.substr(2)
          }
        }

        var min = "00";
        if (tail.length >= 2) {
          var split = tail.substr(0, 1)

          if (split == ":" && tail.length > 2) {
            min = tail.substr(1, 2)
            tail = tail.substr(3)
          } else {
            min = tail.substr(0, 2)
            tail = tail.substr(2)
          }
        }
        var s = "00";
        if (tail.length >= 2) {
          var split = tail.substr(0, 1)
          if (split == ":" && tail.length > 2) {
            s = tail.substr(1, 2)
            tail = tail.substr(3)
          } else {
            s = tail.substr(0, 2)
            tail = tail.substr(2)
          }
        }

        var S = "000";
        if (tail.length > 0) {
          var split = tail.substr(0, 1)
          if (split == " " && tail.length > 2) {
            S = tail.substr(1)
          } else {
            S = tail.substr(0)
          }
        }
        var str = year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + s
        var date = new Date(str);
        this.form_output.time_output = date.getTime() + Number(S)
      },
      enter_press(){
        let input = this.form_input.time_intput
        if(/^\d{4}-\d{2}-\d{2}/.test(input)){
          this.time2mtsBtn()
        }else if(/\d{13}$/.test(input)){
          this.ts2timeBtn(1)
        }else if(/\d{10}$/.test(input)){
          this.ts2timeBtn(1000)
        }else{
          alert('请输入正确格式再按回车!')
        }
      }
    },
    created() {
      this.currentTime()
    }
  }
</script>

<style scoped>

</style>
